{block name="style"}
<link href="{:sysconf('browser_icon')}" rel="shortcut icon">
<link href="__STATIC__/plugs/awesome/css/font-awesome.min.css?v={:date('ymd')}" rel="stylesheet">
<link href="__STATIC__/plugs/bootstrap/css/bootstrap.min.css?v={:date('ymd')}" rel="stylesheet">
<link href="__STATIC__/plugs/layui/css/layui.css?v={:date('ymd')}" rel="stylesheet">
<link href="__STATIC__/theme/css/console.css?v={:date('ymd')}" rel="stylesheet">
<link href="__STATIC__/theme/css/animate.css?v={:date('ymd')}" rel="stylesheet">
<script>window.ROOT_URL = '__ROOT__';</script>
<script src="__STATIC__/plugs/jquery/pace.min.js"></script>
<script src="__STATIC__/plugs/layui/layui.all.js"></script>
<script src="__STATIC__/admin.js"></script>
<script src="__STATIC__/plugs/require/require.js"></script>
<script src="__STATIC__/app.js"></script>
{/block}
<div class="layui-input-block">
        <div id="attrlist">
            <table>
            {foreach $attr as $attr}
                <tr>
                <!--{if in_array($attr['id'],$vo['attr'])}-->
                        <!--{if $attr.count==0}-->
                    <td><input type="checkbox" checked   value="{$attr.name}">{$attr.name}
                        <!--{else}-->
                    <td>   <span>{$attr.name}</span>
                        <!--{/if}-->
                        <input type="hidden" name="attrname[]" value="{$attr.name}" >
                        <input type="hidden" name="attrid[]" value="{$attr.id}" >
                        <input type="hidden" name="type[]" value="{$vo.type}" ></td>
                        <!--{if $attr.count==0}-->

                        <!--{else}-->
                    <td>       <a href="#" onclick="showmore({$attr.id},this,3)"><span>>>></span></a></td>
                        <!--{/if}-->
                <!--{else}-->
                        <!--{if $attr.count==0}-->
                    <td><input type="checkbox"    value="{$attr.name}">{$attr.name}
                        <!--{else}-->
                    <td class="pids">       <span>{$attr.name}</span>
                        <!--{/if}-->
                            <input type="hidden" name="attrname[]" value="{$attr.name}" >
                            <input type="hidden" name="type[]" value="{$vo.type}" >
                            <input type="hidden" name="attrid[]" value="{$attr.id}" ></td>
                        <!--{if $attr.count==0}-->

                        <!--{else}-->
                    <td>        <a href="#" onclick="showmore({$attr.id},this,3)"><span>>>></span></a></td>
                        <!--{/if}-->
                <!--{/if}-->
                </tr>
            {/foreach}
            </table>
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    <div class="layui-form-item text-center">
        <button class="layui-btn btn-info" onclick="select_attr()">保存数据</button>
    </div>
{block name="script"}
<script>
    function select_attr(){
        if($("input[type='checkbox']:checked").length == 0)
        {
            layer.alert('请选择配方属性', {icon: 2}); //alert('请选择商品');
            return false;
        }
        // 将没选中的复选框所在的  tr  remove  然后删除复选框
        $("input[type='checkbox']").each(function(){
            if($(this).is(':checked') == false)
            {
                $(this).parent().parent().remove();
            }
            $(this).siblings().show();
            $(this).remove();
        });
        $(".btn-info").remove();
        $(".pids").parent().remove();
        $(".emptytd").remove();
        $("a").parent().parent().remove();
        $("br").parent().parent().remove();
        javascript:window.parent.call_back($('#attrlist').html(),{$vo['type']});
    }
    function showmore(cid,thisE,num){
        var em = "";
        var pid = 0;
        for(var j = 0;j<num;j++){
            em = em +"<td class='emptytd'></td>";
        }
        {if isset($vo['pid'])}
            pid = {$vo['pid']};
        {/if}
        var ptype = {$ptype} ;
        var pids = {$pids} ;
        num = num +1;
        $.ajax({
            type: "GET",
            url: "{:url('formula/ajaxgetAttr')}",
            data: {pid:pid,cid:cid,ptype:ptype},
            dataType: "json",
            success: function(data){
                console.log(data);
                $(thisE).html("");
                for(var i = 0;i<data.length;i++){
                    var html = '<tr>  '+em;
                    if(data[i].count==0){
                        html = html+   '<td><input type="checkbox" '+data[i].checked+'  value="'+data[i].id+'" >' +data[i].name;
                    }else{
                        html = html+ "<td>" +data[i].name;
                    }
                    html = html+'<input type="hidden" name="attrid[]" value="'+data[i].id+'" > ' +
                                '<input type="hidden" name="attrname[]" value="'+data[i].name+'" > ' +
                                '<input type="hidden" name="type[]" value="'+ptype+'" > </td>';
                    if(data[i].count==0 ) {
                    }else{
                        html = html+'<td><a href="#" onclick="showmore('+data[i].id+',this,'+num+')"><span>>>></span></a></td>';
                    }
                        html = html+'</tr>';
                    $(thisE).parent().parent().after(html);
                    console.log(html)
                }

            }
        });
    }
    </script>
{/block}
